<template>
  <mid-dialog-box :title="'聊天'" @closeMidDialog="closeMidDialog">
    <div class="messageDialog height_100">
      <div class="msgContent self_scroll" ref="msgContent">
        <!-- 时间 -->
        <div
          class="message clearfix"
          :class="tools.isSelf(msg.from) ? 'self' : 'opposite'"
          v-for="msg in cfMessageList"
          :key="msg.msgID"
        >
          <div class="avatarBox">
            <avatar :imgID="$store.state.chatInformation.userList[msg.from].user_img_id"  :showuserinfo="'&' + msg.from" :id="msg.from"></avatar>
          </div>
          <div class="msgBox">
            <div class="name">{{ $store.state.chatInformation.userList[msg.from].remarks ? $store.state.chatInformation.userList[msg.from].remarks : $store.state.chatInformation.userList[msg.from].user_name }}</div>
            <div class="msg">{{ msg.msg }}</div>
          </div>
        </div>
      </div>
      <div class="msgInput">
        <textarea
          id="inputText"
          @keyup.enter="sendMessage"
          v-model="selfMsg"
          class="width_100 height_100 self_scroll"
        >
        </textarea>
      </div>
    </div>
  </mid-dialog-box>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  data () {
    return {
      selfMsg: ''
    }
  },
  computed: {
    cfMessageList () {
      // 会议消息列表
      return this.$store.state.conferenceRoom.cf_chatContent
    }
  },
  watch: {
    cfMessageList: {
      deep: true,
      immediate: true,
      handler (val) {
        this.toBottom()
      }
    }
  },
  mounted () {
    document.querySelector('#inputText').focus()
    this.toBottom()
  },
  methods: {
    closeMidDialog () {
      this.$emit('closeMsgDialog')
    },
    sendMessage () {
      if (this.selfMsg.trim()) {
        const message = {
          msg: this.selfMsg,
          msgID: +new Date(),
          from: this.$store.state.user.userInfo.user_id
        }
        this.$store.commit('conferenceRoom/set_cf_chatContent', {
          list: [message]
        })
        sendSock({
          type: '4.2.1',
          body: {
            cf_id: this.$store.state.conferenceRoom.cf_id,
            msg: this.selfMsg
          }
        })
        this.selfMsg = ''
      }
    },
    toBottom () {
      if (this.$refs.msgContent) {
        this.$nextTick(() => {
          const currentHeight = this.$refs.msgContent.clientHeight // 内容盒子限制高度
          const scrollHeight = this.$refs.msgContent.scrollHeight // 盒子去掉滚动条的实际高
          this.$refs.msgContent.scrollTo(0,
            scrollHeight - currentHeight
          )
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.messageDialog {
  .msgContent {
    height: calc(100% - 108px);
    padding: 24px;
    // background-color: pink;
    .message {
      margin-bottom: 32px;
      .avatarBox {
        width: 40px;
        height: 40px;
      }
      .msgBox {
        margin-left: 12px;
        .name {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #5f7196;
          line-height: 17px;
        }
        .msg {
          margin-top: 8px;
          padding: 10px 14px;
          border-radius: 0px 12px 12px 12px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          line-height: 20px;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
      &.self {
        .avatarBox,
        .msgBox {
          float: right;
        }
        .msgBox {
          margin-left: 0;
          margin-right: 12px;
          .msg {
            border-radius: 12px 0px 12px 12px;
            color: #fff;
            background: #304eec;
          }
        }
      }
      &.opposite {
        .avatarBox,
        .msgBox {
          float: left;
          .msg{
            color: #0D172C;
            background: #f6f7fb;
          }
        }
      }
    }
  }
  .msgInput {
    height: 108px;
    border-top: 1px solid #ebedf3;
    background-color: skyblue;
    textarea {
      padding: 16px 24px;
      border: none;
    }
  }
}
</style>
